<template>
	<div class="system-role-dialog-container">
		<el-dialog v-model="state.dialog.isShowDialog" draggable title="编辑字段" :fullscreen="true">
			<el-tabs type="border-card">
				<el-tab-pane label="模块信息">
					<el-form label-width="180px" :model="state.table">
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="表名称" prop="state.table.tableName">
									<el-input v-model="state.table.tableName" placeholder="请输入表名称" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="表注释" prop="state.table.tableComment">
									<el-input v-model="state.table.tableComment" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="表模板" prop="state.table.tplCategory">
									<el-select v-model="state.table.tplCategory">
										<el-option label="增删改查模板" value="crud" />
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :span="12">
								<el-form-item label="controller文件名称" prop="state.table.className">
									<el-input v-model="state.table.className" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="logic文件名称" prop="state.table.logic">
									<el-input v-model="state.table.logic" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="作者" prop="state.table.author">
									<el-input v-model="state.table.author" placeholder="请输入" />
								</el-form-item>
							</el-col>
							<!-- <el-col :span="12">
								<el-form-item label="父模块名称" prop="state.table.parentModuleName">
									<el-input v-model="state.table.parentModuleName" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col> -->
							<el-col :span="12">
								<el-form-item label="模块名称" prop="state.table.modueName">
									<el-input v-model="state.table.modueName" placeholder="请输入"></el-input>
								</el-form-item>
							</el-col>

							<el-col :span="24">
								<el-form-item label="备注" prop="state.table.remark">
									<el-input v-model="state.table.remark" type="textarea" :rows="3"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="字段信息">
					<el-table v-loading="state.tableLoading" :data="state.columnData" style="width: 100%">
						<el-table-column label="序号" type="index" width="50" fixed />
						<el-table-column label="字段列名" prop="columnName" width="180" fixed :show-overflow-tooltip="true" />
						<el-table-column label="字段注释" width="180" fixed>
							<template #default="scope">
								<el-input v-model="scope.row.columnComment"></el-input>
							</template>
						</el-table-column>
						<el-table-column class-name="allowDrag" label="mysql类型" prop="columnType" width="120" :show-overflow-tooltip="true" />
						<el-table-column label="go字段名称" width="170">
							<template #default="scope">
								<el-input v-model="scope.row.goType"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="go字段类型" width="170">
							<template #default="scope">
								<el-select v-model="scope.row.goField">
									<el-option label="int" value="int" />
									<el-option label="uint" value="uint" />
									<el-option label="int64" value="int64" />
									<el-option label="uint64" value="uint64" />
									<el-option label="float64" value="float64" />
									<el-option label="string" value="string" />
									<el-option label="gtime.Time" value="gtime.Time" />
									<el-option label="gjson.Json" value="gjson.Json" />
									<el-option label="bool" value="bool" />
								</el-select>
							</template>
						</el-table-column>

						<el-table-column label="html字段名称" width="180">
							<template #default="scope">
								<el-input v-model="scope.row.htmlField" />
							</template>
						</el-table-column>

						<el-table-column label="插入" width="50">
							<template #default="scope">
								<el-checkbox
									v-model="scope.row.isInsert"
									:disabled="scope.row.columnName == 'created_at' || scope.row.columnName == 'id' || scope.row.columnName == 'updated_at'"
								></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="编辑" width="50">
							<template #default="scope">
								<el-checkbox
									v-model="scope.row.isEdit"
									:disabled="scope.row.columnName == 'created_at' || scope.row.columnName == 'id' || scope.row.columnName == 'updated_at'"
								>
								</el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="列表" width="50">
							<template #default="scope">
								<el-checkbox v-model="scope.row.isList"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="查询" width="50">
							<template #default="scope">
								<el-checkbox v-model="scope.row.isQuery"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="查询方式" width="170">
							<template #default="scope">
								<el-select v-model="scope.row.queryType">
									<el-option label="=" value="EQ" />
									<el-option label="!=" value="NE" />
									<el-option label=">" value="GT" />
									<el-option label=">=" value="GTE" />
									<el-option label="<" value="LT" />
									<el-option label="<=" value="LTE" />
									<el-option label="LIKE" value="LIKE" />
									<el-option label="BETWEEN" value="BETWEEN" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="必填" width="50">
							<template #default="scope">
								<el-checkbox v-model="scope.row.isRequired"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="显示类型" width="180">
							<template #default="scope">
								<el-select v-model="scope.row.htmlType">
									<el-option label="文本框" value="input" />
									<el-option label="文本域" value="textarea" />
									<el-option label="下拉框" value="select" />
									<el-option label="单选框" value="radio" />
									<el-option label="复选框" value="checkbox" />
									<el-option label="日期控件" value="datetime" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="字典类型">
							<template #default="scope">
								<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
									<el-option v-for="dict in state.dictOptions" :key="dict.dictName" :label="dict.dictName" :value="dict.id">
										<span style="float: left">{{ dict.dictName }}</span>
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="空空如也" />
						</template>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<div class="submit">
				<el-button @click="onCancel">取消</el-button>
				<el-button type="primary" @click="onSubmit">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemColumnDialog">
import { reactive, onMounted } from 'vue'
import { tableApi } from '@/api/sys/table'
import { ElMessage } from 'element-plus'

// 定义变量内容
const state: any = reactive({
	dialog: {
		isShowDialog: false
	},
	modueName: '',
	dictOptions: [],
	columnData: [],
	table: {
		modueName: '',
		className: '',
		logic: '',
		author: '',
		parentModuleName: '',
		tableName: '',
		tableComment: '',
		tplCategory: 'crud',
		remark: ''
	},
	tableLoading: false
})

// 打开弹窗
const openDialog = async (row: GenTable) => {
	state.dialog.isShowDialog = true
	tableApi.getColumnsByTableName(row.tableName).then((r: any) => {
		state.columnData = r.data.columns
		state.table = r.data.table
		if (state.table.tplCategory == '') {
			state.table.tplCategory = 'crud'
		}
		state.tableLoading = false
	})
}
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false
	state.tableLoading = false
}
// 取消
const onCancel = () => {
	closeDialog()
}

const emit = defineEmits(['refresh'])

// 提交
const onSubmit = async () => {
	tableApi.updateTableColumn({ columnData: state.columnData, table: state.table }).then((res: any) => {
		ElMessage.success('修改成功')
		closeDialog()
		emit('refresh')
	})
}

// 暴露变量
defineExpose({
	openDialog
})
onMounted(() => {})
</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
.submit {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.el-col {
	margin-top: 20px;
}
</style>
